<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider
        style="border-radius: 10px;overflow:hidden;"
        theme="light"
        :collapsedWidth="40"
        v-model:collapsed="sc_state.isMobile" >
      <a-menu
          v-model:selectedKeys="selectedKeys"
          theme="light"
          mode="inline">
        <a-menu-item key="1">
          <pie-chart-outlined />
          <span>Option 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <desktop-outlined />
          <span>Option 2</span>
        </a-menu-item>
        <a-menu-item key="9">
          <file-outlined />
          <span>File</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout
    >
      <a-layout-content style="margin: 0 16px">
        <a-row gutter="16" style="margin-bottom: 15px">
          <a-col  :span="12">
            <a-input-search v-model:value="value" placeholder="关键字" loading />
          </a-col>
          <a-col>
            <a-button type="primary">发布讨论</a-button>
          </a-col>
        </a-row>
        <a-card class="card" size="small" title="Small size card" style="width: 100%">
          <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
            <template #footer>
              <div>
                <b>ant design vue</b>
                footer part
              </div>
            </template>
            <template #renderItem="{ item }">
              <a-list-item key="item.title">
                <template #actions>
                  <span v-for="{ icon, text } in actions" :key="icon">
                    <component :is="icon" style="margin-right: 8px" />
                    {{ text }}
                  </span>
                </template>
                <template v-if="sc_state.isComputer" #extra>
                  <img
                      width="272"
                      alt="logo"
                      src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                  />
                </template>
                <a-list-item-meta :description="item.description">
                  <template #title>
                    <a :href="item.href">{{ item.title }}</a>
                  </template>
                  <template #avatar><a-avatar :src="item.avatar" /></template>
                </a-list-item-meta>
                {{ item.content }}
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import {computed, h, onBeforeUnmount, onMounted, reactive, ref, watch, watchEffect} from "vue";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue';


import { StarOutlined, FileOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
const listData: Record<string, string>[] = [];

for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    title: `ant design vue part ${i}`,
    avatar: 'https://joeschmoe.io/api/v1/random',
    description:
        'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  });
}

const pagination = {
  onChange: (page: number) => {
    //console.log(page);
  },
  pageSize: 3,
};
const actions: Record<string, any>[] = [
  { icon: StarOutlined, text: '156' },
  { icon: LikeOutlined, text: '156' },
  { icon: MessageOutlined, text: '2' },
];


const value = ref<string>("")
const collapsed = computed(() => {
  return window.innerWidth < 768;
})
const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1'],
  preOpenKeys: ['sub1'],
});
watch(
    () => state.openKeys,
    (_val, oldVal) => {
      state.preOpenKeys = oldVal;
    },
);

const sc_state = reactive({
  isMobile: false,
  isComputer:false,
});

const handleResize = () => {
  sc_state.isMobile = window.innerWidth < 768;
  sc_state.isComputer = window.innerWidth >= 992;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});


const onCollapse = (collapsed: boolean, type: string) => {
  //console.log(collapsed, type);
};

const onBreakpoint = (broken: boolean) => {
  //console.log(broken);
};

const selectedKeys = ref<string[]>(['4']);

</script>

<style lang="scss" scoped>
.discuss{
  .card{
    margin-bottom: 30px;
  }
  min-height: 100vh;
}

</style>
